<script setup>
  import { defineProps } from 'vue'

  // 接收组件传输参数
  const props = defineProps({
    title: {
      type: Object,
      required: true
    }
  })
</script>

<template>
  <div class="province-weather">
    <el-card>
      <div class="card-header">
        <h3>{{ props.title.title }}</h3>
      </div>
      <div class="weather-grid">
        <slot></slot>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
  .province-weather {
    margin-bottom: 20px;
  }

  .province-weather .el-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .card-header h3 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #333;
  }

  .weather-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    padding: 16px;
  }

  @media (max-width: 1200px) {
    .weather-grid {
      grid-template-columns: repeat(6, 1fr);
    }
  }

  @media (max-width: 992px) {
    .weather-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (max-width: 768px) {
    .weather-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (max-width: 576px) {
    .weather-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }
</style>
